<template>
  <view class="">
    <!-- 自定义导航栏 -->
    <gh-navbar id="navbar" :showback="false" title="创新咨询"  />
    <div class="index">
      <view class="header">
        <!-- 搜索组件 -->
        <gh-search-btn class="search-btn" url="/pages/lawer/lawer" placeholder="大家都在搜的律师..." />
        <div class="xiaoxi-box">
          <navigator url="/pages/zixun/zixun" open-type="switchTab" class="iconfont icon-xiaoxi"></navigator>
          <div v-show="newMessage" class="dian"></div>
        </div>
      </view>
      <view class="category">
        <view class="twoway">
          <navigator class="navigator" url="/pageIndex/menu/questionConsulting">
            <image :src="baseUrl + 'home_img_a.png'" mode="widthFix" />
          </navigator>
          <navigator class="navigator" url="/pages/lawer/lawer" open-type="switchTab">
            <image :src="baseUrl + 'home_img_a2.png'" mode="widthFix" />
          </navigator>
        </view>
        <view class="menu">
          <navigator class="menu-item" :url="item.url" v-for="(item, index) in menuList" :key="index">
            <image :src="baseUrl + item.imgName" mode="widthFix" />
            <view class="menu-text">{{item.innerText}}</view>
          </navigator>
        </view>
      </view>
      <view class="title-box">
        <view class="title-text">律师推荐</view>
        <navigator class="title-right more" url="/pages/lawer/recommend">more>></navigator>
      </view>
      <view class="swiper-box">
        <swiper class="swiper" next-margin="106rpx" :current="swiperCurrentIndex" @change="handleSwiperChange" >
          <!-- 轮播滑动卡片 -->
          <swiper-item v-for="item in lawer" :key="item.id">
            <!-- 律师卡片组件 -->
            <gh-lawer-card :item="item" />
          </swiper-item>
          <!-- 轮播滑动卡片 -->
        </swiper>
      </view>
      <!-- 律师推荐结束 -->
      <view class="title-box">
        <view class="title-text">律师榜单</view>
      </view>
      <div class="bangdan">
        <view class="twoway">
          <navigator class="navigator" url="/pageIndex/ranking/ranking?id=0">
            <image :src="baseUrl + 'home_img_b.png'" mode="widthFix" />
          </navigator>
          <navigator class="navigator" url="/pageIndex/ranking/ranking?id=1">
            <image :src="baseUrl + 'home_img_b2.png'" mode="widthFix" />
          </navigator>
        </view>
      </div>
      <view class="title-box">
        <view class="title-text">知识科普</view>
        <view class="reload" @click="handleReload">
          <text class="iconfont icon-shuaxin"></text>
          <text>换一换</text>
        </view>
      </view>
      <view class="category article" :id="article.id">
        <div class="article-title">{{article.title}}</div>
        <div class="line">
          <div class="active-line"></div>
        </div>
        <div class="article-content">{{article.content}}</div>
      </view>
      <view class="title-box">
        <view class="title-text">法友问答</view>
      </view>
      <navigator
        :url="'/pageIndex/answer/answer?id='+ item.id"
        class="q-a"
        v-for="(item, index) in questionList"
        :key="index"
      >
        <div class="question">
          <text class="q-icon">问</text>
          <text class="q-content">{{item.problem}}</text>
        </div>
        <div class="answer">
          <text class="a-icon">答</text>
          <text class="a-content">{{item.answer}}</text>
        </div>
      </navigator>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      baseUrl: this.$store.state.imgBaseUrl,
      menuList: [
        {
          url: "/pageIndex/menu/questionConsulting?type=1&serve=0",
          imgName: "home_icon_b.png",
          innerText: "在线咨询"
        },
        {
          url: "/pageIndex/menu/telephoneCounseling?type=2&serve=1",
          imgName: "home_icon_b2.png",
          innerText: "电话咨询"
        },
        {
          url: "/pageIndex/menu/lawyerLetter?type=3&serve=1",
          imgName: "home_icon_b3.png",
          innerText: "律师函"
        },
        {
          url: "/pageIndex/menu/draft?type=4&serve=1",
          imgName: "home_icon_b4.png",
          innerText: "合同起草"
        }
      ],
      lawer: [],
      article: {
        // 知识科普
      },
      questionList: [], // 法友问答
      newMessage: false,
      swiperCurrentIndex: 0, // 当前滑动的item   index
    };
  },
  onShow(){
    let that = this;
    uni.showLoading({
      title: "加载中"
    });
    // 显示第一个item
    this.swiperCurrentIndex = 0
    // 数据初始化
    uni.request({
      url: that.$store.state.baseUrl + "member.index",
      data: {
        op: "getInitialization"
      },
      success(res) {
        let { article, lawer, questionList } = res.data.data.list;
        that.article = article;
        that.lawer = lawer;
        that.questionList = questionList;
        uni.hideLoading();
      }
    });
    // 检测微信登录状态有没有过期
    let promise1 = new Promise((resolve, reject) => {
      uni.checkSession({
        success() {
          resolve(true)
        },
        fail(){
          reject(false)
        }
      });
    })
    promise1.then(() => {
      // 检测有没有token
      let token = uni.getStorageSync("token");
      if (!token) {
        return
      }
      const that = this
      // store中写好的全局websocket监听事件
      const uid = uni.getStorageSync('uid')
      this.$store.dispatch('globalSocket')
      // 系统消息
      let systemData = {
        type: "system_newest",
        uid,
        identity: that.$store.state.identity,
        page: 1,
        psize: 1
      };
      this.$store.dispatch("sendMsg", systemData);
      uni.onSocketMessage(function(res) {
        const resData = JSON.parse(res.data)
        console.log(resData);
        if(resData.type == 'system_newest'){
          // see  == false 未读
          that.newMessage = !resData.see
        }
      });
    }).catch(() => {
    
    })
  },

  methods: {
    handleSwiperChange(e){
      // 记录滑动的item---index
      this.swiperCurrentIndex = e.detail.current
    },
    handleReload() {
      uni.showLoading({
        title: '加载中'
      });
      let that = this;
      uni.request({
        url: that.$store.state.baseUrl + "member.index",
        // method: 'post',
        data: {
          op: "getPolularScience",
          kid: that.article.id
        },
        success(res) {
          that.article = res.data.data.list.article
        },
        complete(){
          uni.hideLoading();
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
// 引入工具less
@import "@/common/util.less";
.index {
  padding: 24rpx;
  // header开始
  .header {
    .gh-around();

    .search-btn {
      flex: 1;
    }
    .xiaoxi-box{
      position: relative;
      .dian{
        position: absolute;
        top: 6rpx;
        right: 10rpx;
        width: 15rpx;
        height: 15rpx;
        border-radius: 50%;
        background-color: red;
      }
      .icon-xiaoxi {
        width: 70rpx;
        color: @theme-color;
        font-size: 60rpx;
        text-align: right;
      }
    }
  }
  // header结束
  .category {
    box-shadow: @shadow;
    margin-top: 36rpx;
    padding: 20rpx;
    border-radius: 10rpx;
    background-color: #fff;
    .twoway {
      .gh-around();
      .navigator {
        width: 48%;
      }
    }
    .menu {
      .flex();
      .menu-item {
        padding: 10rpx;
        padding-bottom: 0;
        width: 25%;
        text-align: center;
        .menu-text {
          font-size: 24rpx;
          color: @font-color;
          transform: translateY(-15rpx);
        }
      }
    }
  }
  .title-box {
    .gh-between();
    padding: 38rpx 0;
    .title-text {
      font-size: 36rpx;
      color: #6c76a7;
    }
    .more {
      font-size: 24rpx;
      color: #abb2ce;
    }
  }
  // 律师推荐
  .swiper-box {
    .swiper {
      height: 335rpx;
    }
  }
  .bangdan {
    margin: 0;
    .twoway {
      .gh-around();
      .navigator {
        width: 50%;
      }
    }
  }
  .reload {
    .gh-center();
    color: @font-color;
    font-size: 25rpx;
    .icon-shuaxin {
      font-size: 30rpx;
      color: @theme-color;
      margin: 2rpx;
      margin-bottom: 0;
    }
  }
  .article {
    margin-top: 0;
    .article-title {
      text-align: center;
      padding: 14rpx 0 10rpx;
      color: #6c76a7;
      font-size: 36rpx;
    }
    .line {
      width: 180rpx;
      border-bottom: 1px solid #eee;
      margin: 0 auto 10rpx;
      .gh-center();
      .active-line {
        width: 30rpx;
        height: 3rpx;
        background-color: #849aff;
      }
    }
    .article-content {
      text-indent: 2em;
      font-size: 30rpx;
      color: @font-color;
    }
  }
  .q-a {
    display: block;
    padding: 30rpx;
    background-color: #eaf0fe;
    border-radius: 35rpx;
    margin-bottom: 20rpx;
    .question {
      margin-bottom: 27rpx;
      .flex();
      align-items: flex-start;
      .q-icon {
        border-radius: 50%;
        color: #fff;
        font-size: 30rpx;
        background-color: #d2d2d2;
        padding: 3rpx 8rpx;
        margin-right: 26rpx;
      }
      .q-content {
        color: #6c76a7;
        font-size: 30rpx;
        font-weight: 600;
        .text-overflow();
      }
    }
    .answer {
      .flex();
      align-items: flex-start;
      .a-icon {
        border-radius: 50%;
        color: #fff;
        font-size: 30rpx;
        padding: 3rpx 8rpx;
        margin-right: 26rpx;
        background-color: #849cff;
      }
      .a-content {
        color: @font-color;
        font-size: 30rpx;
        .text-overflow();
      }
    }
  }
}
</style>
